Attributs globaux

HTML approfondi

DSP - USAL33

Qu'est-ce qu'un attribut global ?

Utilisable sur toutes les balises HTML.

Attribut Rôle
id Identifiant unique
class Classe(s) CSS (réutilisable)
style Styles CSS inline
title Info-bulle au survol
data-* Données personnalisées
lang Langue du contenu
hidden Cache l'élément

Attribut id

Rôle : identifiant unique dans la page

  • Valeur unique · commence par une lettre · pas d'espaces
<div id="header">En-tête</div>
<a href="#section2">Aller à la section 2</a>
<section id="section2">...</section>

Usages : ancres de navigation, ciblage JavaScript

Attribut class

Rôle : une ou plusieurs classes CSS (réutilisables)

<p class="important">Texte important</p>
<div class="card featured highlight">Carte</div>
  • Utilisable sur plusieurs éléments
  • Un élément peut avoir plusieurs classes

💡 Préférer les classes aux id pour le style

id vs class

Critère id class
Unicité Unique Réutilisable
Par élément Un seul Plusieurs
Spécificité CSS Élevée (100) Moyenne (10)
Usage Ancres, JS Styles CSS

Attribut style

Rôle : styles CSS inline

<p style="color: blue; font-size: 18px;">Texte bleu</p>

⚠️ Mélange structure et présentation → préférer un fichier CSS externe

Cas légitime : styles générés dynamiquement par JavaScript

Attribut title

Rôle : info-bulle au survol

<abbr title="HyperText Markup Language">HTML</abbr>
<img src="photo.jpg" alt="Photo" title="Vacances 2026">
  • Aide contextuelle, améliore l'UX
  • ⚠️ Non accessible au tactile (mobiles)

Attributs data-*

Rôle : stocker des données personnalisées (pour JavaScript)

<article data-article-id="42" data-author="Jean Dupont">
    <h2>Titre</h2>
</article>

<script>
  const a = document.querySelector('article');
  console.log(a.dataset.articleId);  // "42"
  console.log(a.dataset.author);     // "Jean Dupont"
</script>

Attribut lang

Rôle : indique la langue du contenu

<html lang="fr">
  <p>Texte en français</p>
  <p lang="en">This is in English</p>
</html>
  • Prononciation correcte (lecteurs d'écran)
  • SEO · traduction automatique · correcteur orthographique

Attribut hidden

Rôle : cache un élément (non visible, non accessible)

<div hidden>Contenu caché</div>

<button onclick="document.getElementById('m').hidden = false">
  Révéler
</button>
<div id="m" hidden>Message secret</div>

Équivalent CSS : [hidden] { display: none; }